<template>
    <div :style="`width:${width};height:${height}`" class="div1">
        <div class="div1-title">
            <div class="div1-title-icon"></div>
            <p :style="`color:${titleColor}`">{{ title }}</p>
            <span>{{ desc }}</span>
        </div>
        <div class="div1-slot">
            <slot name="content"></slot>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        // 宽
        width: {
            type: String,
            default: () => "100%"
        },
        // 高
        height: {
            type: String,
            default: () => ""
        },
        // 标题
        title: {
            type: String,
            default: () => ""
        },
        // 标题颜色
        titleColor: {
            type: String,
            default: () => "#000"
        },
        // 描述
        desc: {
            type: String.apply,
            default: () => ""
        }
    }
}
</script>
<style lang="scss">
.div1 {
    background: #fff;
    margin-top: 20px;
    padding: 20px 20px 20px 0;
    box-sizing: border-box;

    &-title {
        display: flex;
        height: 25px;
        line-height: 25px;
        font-size: 16px;

        &-icon {
            width: 10px;
            height: 25px;
            background: #27aaa4;
            border-top-right-radius: 8px;
            border-bottom-right-radius: 8px;
        }

        p {
            margin-left: 20px;
            width: 80%;
            text-align: left;
            font-weight: 500;
        }

        span {
            flex: 1;
            text-align: right;
            display: inline-block;
            font-size: 14px;
            color: #95969b;
        }
    }
    &-slot {
        height: calc(100% - 25px);padding: 20px 0 0 20px;
    }

}
</style>